import { useEffect, useState } from "react";
import { GetBusinessTypes, AddBusinessType, DeleteBusinessType } from "../../api/type";
import { Button, Input, Space, Table, Tag, message, Descriptions, Spin, Pagination, Modal, Skeleton } from "antd"
import "../../css/supplier.css"
import React from 'react';


const PAGE_SIZE = 5;// 设置每页显示的数据条数

const Type = () => {
    const [loading, setLoading] = React.useState(false);
    const [type, setType] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [searchKeyword, setSearchKeyword] = useState('');//搜索关键字
    const [visible, setVisible] = useState(false); // 控制模态框的显示与隐藏  
    const [name, setName] = useState('');
    const [explain, setExplain] = useState('');
    const [shows, setShows] = useState(true);//骨架屏
    const bindgoods = () => {
        setLoading(true)
        GetBusinessTypes({
            page: currentPage,
            limit: PAGE_SIZE,
            key: searchKeyword,
            // total:''
        }).then((res) => {
            if (res.result === 0) {
                setLoading(false)
                setType(res.data.data);
                setTotal(res.data.total);
                setShows(false);
            }
        })
    }
    useEffect(() => {
        bindgoods();
    }, [currentPage, searchKeyword]);
    const showModal = () => {
        // fetchData(); // 在显示模态框前获取数据  
        setVisible(true); // 显示模态框  
    };
    const handleCancel = () => {
        // 处理模态框取消按钮的点击事件  
        setVisible(false); // 隐藏模态框 
    };
    const handleOk = async () => {
        await AddBusinessType({
            name: name,
            explain: explain
        }).then((res) => {
            if (res.result === 0) {
                message.success('添加成功', 1.5);
                bindgoods();
                // setVisible(false); // 隐藏模态框 
            }
        })
    }
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const Type = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '种类',
            dataIndex: 'name',
        },
        {
            title: '供应商数量',
            dataIndex: 'count',
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 280,
            render: (record) => (
                <Space size="middle">
                    <Button type="primary" id='button-xq'>详情</Button>

                    <Button type="primary" danger onClick={() => del(record)} >删除</Button>
                </Space>
            ),
        },

    ]

    const del = async (record) => {
        setLoading(true)
        await DeleteBusinessType({
            id: record.id
        }).then((res) => {
            if (res.result === 0) {
                message.success(res.message, 1.5);
                bindgoods();
                setLoading(false)
            }
        })

    }
    const handleNameChange = (e) => {
        setName(e.target.value);
    };
    const handleExplainChange = (e) => {
        setExplain(e.target.value);
    };
    const items = [
        {
            key: '1',
            label: '种类名称',
            children: <Input value={name} onChange={handleNameChange} placeholder="种类名称" />,
            span: 3,
        },
        {
            key: '1',
            label: '种类描述',
            children: <Input value={explain} onChange={handleExplainChange} placeholder="种类描述" />,
            span: 3,
        },
    ]
    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <Spin spinning={loading} delay={500}>
                    <div className="container">
                        <div className="content">
                            <div className="button">
                                <Button type="primary" id='button-xq' onClick={showModal} ghost style={{ marginTop: 10 }}>新增</Button>
                                <Modal
                                    title="新增类型"
                                    visible={visible} // 控制模态框的显示与隐藏  
                                    onOk={handleOk}
                                    onCancel={handleCancel}
                                    okText="新增" // 设置确定按钮的文本为“确定”  
                                    cancelText="取消" // 设置取消按钮的文本为“取消”
                                    mask={false}
                                >
                                    <Descriptions layout="vertical" bordered items={items} />
                                </Modal>
                                <div className='box-button2'>
                                    <Space.Compact style={{ width: '100%', height: '40px' }}>
                                        <Input placeholder="种类名称" value={searchKeyword}
                                            onChange={(e) => setSearchKeyword(e.target.value)} ></Input>
                                        <Button type="primary" ghost style={{ height: '40px' }}>搜索</Button>
                                    </Space.Compact>
                                </div>
                                <div>

                                </div>
                            </div>
                            <div className="table">
                                <Table
                                    columns={Type}
                                    dataSource={type}
                                    bordered
                                    pagination={false}
                                />
                            </div>
                            <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                        </div>
                    </div>
                </Spin></Skeleton>
        </div>
    )
}


export default Type